import { AccessibilityDoc } from '@/doc/cascadeselect/accessibilitydoc';
import { BasicDoc } from '@/doc/cascadeselect/basicdoc';
import { DisabledDoc } from '@/doc/cascadeselect/disableddoc';
import { FilledDoc } from '@/doc/cascadeselect/filleddoc';
import { FloatLabelDoc } from '@/doc/cascadeselect/floatlabeldoc';
import { IftaLabelDoc } from '@/doc/cascadeselect/iftalabeldoc';
import { ImportDoc } from '@/doc/cascadeselect/importdoc';
import { InvalidDoc } from '@/doc/cascadeselect/invaliddoc';
import { LoadingDoc } from '@/doc/cascadeselect/loadingdoc';
import { ReactiveFormsDoc } from '@/doc/cascadeselect/reactiveformsdoc';
import { SizesDoc } from '@/doc/cascadeselect/sizesdoc';
import { TemplateDoc } from '@/doc/cascadeselect/templatedoc';
import { TemplateDrivenFormsDoc } from '@/doc/cascadeselect/templatedrivenformsdoc';
import { FluidDoc } from '@/doc/cascadeselect/fluiddoc';
import { ClearIconDoc } from '@/doc/cascadeselect/clearicondoc';
import { PTComponent } from '@/doc/cascadeselect/pt/PTComponent';
import { AppDoc } from '@/components/doc/app.doc';
import { Component } from '@angular/core';

@Component({
    standalone: true,
    imports: [AppDoc],
    template: `
        <app-doc
            docTitle="Angular CascadeSelect Component"
            header="CascadeSelect"
            description="CascadeSelect displays a nested structure of options."
            [docs]="docs"
            [apiDocs]="['CascadeSelect']"
            [ptDocs]="ptComponent"
            themeDocs="CascadeSelect"
        ></app-doc>
    `
})
export class CascadeSelectDemo {
    ptComponent = PTComponent;

    docs = [
        {
            id: 'import',
            label: 'Import',
            component: ImportDoc
        },
        {
            id: 'basic',
            label: 'Basic',
            component: BasicDoc
        },
        {
            id: 'template',
            label: 'Template',
            component: TemplateDoc
        },
        {
            id: 'loading',
            label: 'Loading State',
            component: LoadingDoc
        },
        {
            id: 'float-label',
            label: 'Float Label',
            component: FloatLabelDoc
        },
        {
            id: 'ifta-label',
            label: 'Ifta Label',
            component: IftaLabelDoc
        },
        {
            id: 'clearicon',
            label: 'Clear Icon',
            component: ClearIconDoc
        },
        {
            id: 'sizes',
            label: 'Sizes',
            component: SizesDoc
        },
        {
            id: 'fluid',
            label: 'Fluid',
            component: FluidDoc
        },
        {
            id: 'filled',
            label: 'Filled',
            component: FilledDoc
        },
        {
            id: 'disabled',
            label: 'Disabled',
            component: DisabledDoc
        },
        {
            id: 'invalid',
            label: 'Invalid',
            component: InvalidDoc
        },
        {
            id: 'forms',
            label: 'Forms',
            children: [
                { id: 'templatedriven', label: 'Template Driven', component: TemplateDrivenFormsDoc },
                { id: 'reactive', label: 'Reactive Forms', component: ReactiveFormsDoc }
            ]
        },
        {
            id: 'accessibility',
            label: 'Accessibility',
            component: AccessibilityDoc
        }
    ];
}
